/**
 * Created by Administrator on 2017\9\25 0025.
 */
import React from 'react';
import {Link} from 'react-router-dom';
import template from './../../commonui/template';
import {Form,Input,Icon,Button} from 'antd';
const FormItem = Form.Item;

let uuid=0;

class DynamicFieldSet extends React.Component{
    constructor(props){
        super(props);
        this.state={
            defalut:this.props.default
        }
         this.handleSubmit=this.handleSubmit.bind(this);
    }
    handleSubmit(e){
        e.preventDefault();
        this.props.form.validateFields((err,values)=>{
            if(!err){
                console.log('Received values of form:',values);
            }
        })
    }
    remove=(k)=>{
        const {form} =this.props;
        const keys = form.getFieldValue('keys');
        if(keys.length===1){
            return ;
        }
        form.setFieldsValue({
            keys:keys.filter(key=>key!==k),
        })
    }

    add=()=>{
        uuid++;
        const {form} =this.props;
        const keys =form.getFieldValue('keys');
        const nextKeys = keys.concat(uuid);
        form.setFieldsValue({
            keys:nextKeys,
        })
    }


    render() {
        const {getFieldDecorator, getFieldValue}=this.props.form;
        const formItemLayout = {
            label: {
                xs: {span: 24},
                sm: {span: 4}
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 20}
            }
        };

        const formItemLayoutWithOutLabel = {
            wrapperCol: {
                xs: {span: 24, offset: 0},
                sm: {span:20,offset:4}
            }
        }

        getFieldDecorator('keys',{initialValue:[]});

        const keys = getFieldValue('keys');
        const a=this.state.default;
        const formItems = keys.map((k,index)=>{
            return (
                <FormItem
                    keys={k}
                >
                    {getFieldDecorator(`names-${k}`,{
                        validateTrigger:['onChange','onBlur'],
                        rules:[{
                            required:true,
                            whitespace:true,
                            message:'Please input'
                        }]
                    })(
                     <Input placeholder={a}  style={{width:'60%',marginRight:8}}/>
                    )}
                    {keys.length>1?(
                        <Icon className="dynamic-delete-button"
                            type="minus-circle-o"
                              disabled={keys.length===1}
                              onClick={()=>this.remove(k)}
                        />
                    ):null}
                </FormItem>
            )

    });
    return(
        <Form onSubmit={this.handleSubmit}>
            {formItems}
            <FormItem {...formItemLayoutWithOutLabel}>
                <Button type="dashed" onClick={this.add} style={{width:'60%'}}>
                    <Icon type="plus"/>Add
                </Button>
            </FormItem>
        </Form>
    )
}

}

const InputList = Form.create()(DynamicFieldSet)

export default template({
    id: 'InputList',
    component: InputList
});